<template>
  <div id="index">
    <!--轮播图-->
    <cube-slide ref="slide"
                :data="items">
      <cube-slide-item v-for="(item, index) in items"
                       :key="index"
                       @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <img class="banner"
               :src="item.image">
        </a>
      </cube-slide-item>
    </cube-slide>
    <!--应用图标-->
    <cube-slide ref="slideList"
                :data="lists"
                :auto-play="false">
      <cube-slide-item v-for="(list, index) in lists"
                       :key="index"
                       @click.native="clickHandler(list, index)">
        <ul class="listul">
          <li class="listli"
              v-for="(ulli,index1) of list"
              :key="index1">
            <a :href="ulli.url">
              <img :src="ulli.image"
                   alt="">
              <p>{{ulli.label}}</p>
            </a>
          </li>
        </ul>
      </cube-slide-item>
    </cube-slide>
  </div>
</template>

<script>
export default {
  name: 'BotnavIndex',
  data () {
    return {
      items: [],
      lists: []
    }
  },
  methods: {
    clickHandler (item, index) {
      console.log(item, index)
    }
  },
  async created () {
    try {
      const item = await this.$http.get('/api/banner')
      this.items = item.data
      const lis = await this.$http.get('/api/rollinglist')
      this.lists = lis.data
    } catch (err) {
      console.log(err)
    }
  }
}
</script>

<style lang="stylus" scoped>
#index
  a
    .banner
      display: black
      width: 100%
      height: 175px
  .listul
    display: flex
    flex-wrap: wrap
    margin-top: 5px
    .listli
      width: 20%
      justifu-content: center
      img
        width: 35px
        height: 35px
        border-radius: 50%
        padding: 10px 0
      p
      font-size: 8px
      padding-bottom: 12px
</style>
